<!--
 * @Date: 2021-07-25 14:06:10
 * @LastEditTime: 2021-10-14 15:54:25
 * @author: yanghong
-->
<template>
  <div id="videoWall" v-if="isShowVideos" :class="{qp:classChange}">
    <div class="close" @click="closePane">×</div>
    <div>
      <el-row>
        <el-col :span="leftM">
          <div class="treecontent">
            <el-tree
              ref="tree"
              class="tree filter-tree"
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-expanded-keys="['spjk']"
              :default-checked-keys="defaultCheck"
              @check="check"
            >
            </el-tree>
          </div>
        </el-col>
        <el-col :span="rightM" style="padding-top: 50px">
          <!-- <video muted controls ref="video" style="width: 100%; height: 100%;"></video> -->
          <el-row :gutter="20" v-if="testShow">
            <el-col :span="8">
              <video
                muted
                controls
                ref="video1"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video2"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video3"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video4"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video5"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video6"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video7"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video8"
                 
              ></video>
            </el-col>
            <el-col :span="8">
              <video
                muted
                controls
                ref="video9"
                 
              ></video>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="handleShow" @click="clickShow"></div>
  </div>
</template>
<script>
let Hls = require("hls.js");
import { eneryEquipmentQuery, videoUrl } from "../../utils/api";
export default {
  data() {
    return {
      sta:false,
      leftM:8,
      rightM:16,
      treeData: undefined,
      defaultCheck: [],
      count: 0,
      currentCheck: [],
      hlsList: [],
      isShowVideos: false,
      showVideo:true,
      classChange:false,
      testShow:true,
    };
  },
  mounted() {
    window.showVidwoWall = this.showVideos;
  },
  methods: {
    clickShow() {
      var eles = document.getElementsByTagName('video');
      if(this.sta){
        this.leftM = 8;
        this.rightM = 16;
        for(var key in eles){
          if(eles[key].style){
            eles[key].style.height = '320px'
          }
        }
      }else{
        this.leftM =0;
        this.rightM =24
        for(var key in eles){
          if(eles[key].style){
            eles[key].style.height = '640px'
          }
        }
      }
      this.sta = !this.sta
      this.classChange = !this.classChange;
    },
    videoInit() {
      var a = JSON.parse(window.sessionStorage.getItem("treeData"));
      this.treeForeach([a[0].children[0]], (node) => {
        node.code && (node.id = node.code);
        if (node.code && this.count < 9) {
          this.defaultCheck.push(node.id);
          this.count++;
        }
      });
      this.treeData = [a[0].children[0]];

      // 此处进行判断显示哪个视频
      eneryEquipmentQuery().then((response) => {
        var alldata = response.data.data;
        for (let index =0; index < this.defaultCheck.length; index++) {
          var clickVideo = alldata.filter((item) => {
            return item.code && item.code == this.defaultCheck[index];
          });
          var param = "?cameraIndexCode=" + clickVideo[0].cameraIndexCode + "&protocol=hls&isTest=0";
          videoUrl(param).then((res) => {
            this.getStream(res.data.data.url, index + 1);
            // this.getStream('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8',index + 1)
          });
        }
      });
    },
    showVideos() {
      this.isShowVideos = true;
      this.videoInit();
    },
    check() {
      var a =this.hlsList
      let that = this;
      for(var i = 0;i<a.length;i++){
        a[i].destroy();
      }
      this.currentCheck = this.$refs.tree.getCheckedKeys();
      eneryEquipmentQuery().then((response) => {
        var alldata = response.data.data;
        for ( let i = that.currentCheck.length-1;i>=0; i--) {
          console.log(that.currentCheck[i],i)
          var clickVideo = alldata.filter((item) => {
            return item.code && item.code == that.currentCheck[i];
          });
          var param = "?cameraIndexCode=" + clickVideo[0].cameraIndexCode + "&protocol=hls&isTest=0";
          videoUrl(param).then((res) => {
            this.getStream(res.data.data.url, i + 1);
            //  this.getStream('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8',i+1 )
          });
        }
      });
    },

    getStream(source, type) {
      var ele = undefined;
      type == 1 && (ele = this.$refs.video1);
      type == 2 && (ele = this.$refs.video2);
      type == 3 && (ele = this.$refs.video3);
      type == 4 && (ele = this.$refs.video4);
      type == 5 && (ele = this.$refs.video5);
      type == 6 && (ele = this.$refs.video6);
      type == 7 && (ele = this.$refs.video7);
      type == 8 && (ele = this.$refs.video8);
      type == 9 && (ele = this.$refs.video9);

      if (Hls.isSupported()) {
        
        var temHls = new Hls();
        temHls.loadSource(source);
        temHls.attachMedia(ele);

        temHls.on(Hls.Events.MANIFEST_PARSED, () => {
          ele.play();
        });
        temHls.on(Hls.Events.ERROR, (event, data) => {});
        this.hlsList.push(temHls)
      } 
    },

    // 关闭弹窗
    closePane() {
      this.isShowVideos = false;
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
  },
};
</script>
<style scoped>
video{
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.handleShow {
  position: absolute;
  bottom: 20px;
  left: 40px;
  width: 134px;
  height: 134px;
  background: url("../../../static/images/equipment/isShow.png") no-repeat
    center;
  background-size: 100% 100%;
}
.qp{
  width: 4096px !important;
  height: 2304px!important;
  left: 0!important;
  top: 0!important;
}
#videoWall {
  margin: 0 auto;
  box-sizing: border-box;
  position: absolute;
  padding: 50px;
  left: 14%;
  top: 320px;
  width: 3000px;
  height: 1380px;
  color: white;
  z-index: 5000;
  background: url("../../../static/images/popups/detailsPane.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transition: all 1.2s;
  overflow: hidden;
}
.treecontent {
  overflow: scroll;
  height: 1300px;
}
.videoItem {
  height: 400px;
  background: url("../../../static/images/popups/detailsPane.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.el-row .el-col {
  margin-bottom: 30px;
}
/* .el-row .el-col-7 {
  width: 600px;
} */

.el-tree {
  background: transparent;
  color: white;
  transform: rotateY(0);
}
.el-tree /deep/ .el-tree-node__content {
  background-color: transparent !important;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background-color: rgba(0, 160, 233, 0.2) !important;
}
.el-tree /deep/ .is-current > .el-tree-node__content {
  /* background-color: rgba(0, 160, 233, 0.2) !important; */
  background-color: transparent !important;
}
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 60px;
}

.tree /deep/ .el-tree-node__children {
  padding-left: 60px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

/* 树添加连接线 */
.tree /deep/ .el-tree-node:before {
  border-left: 2px solid #00aeff;
  bottom: 0px;
  height: 100%;
  top: -8px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 2px solid #00aeff;
  height: 20px;
  top: 30px;
  width: 82px;
}

/* 修改树节点的文字大小 */
.tree /deep/ .el-tree-node__label {
  font-size: 36px;
  color: white;
}
/* 修改树节点的高度 */
.tree /deep/ .el-tree-node__content {
  height: 60px;
}
/* 修改下拉选箭头的大小 */
.tree /deep/ .el-tree-node__expand-icon {
  font-size: 36px;
}
.tree /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree /deep/ .el-icon-caret-right:before {
  width: 44px;
  height: 44px;
  display: block;
  background: url("../../../static/images/equipment/zk.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
.tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  width: 44px;
  height: 44px;
  display: block;
  background: url("../../../static/images/equipment/zd.png") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}
/* 复选框的大小调整 */
.tree /deep/ .el-checkbox__inner {
  width: 30px;
  height: 30px;
  background: #00446f;
  border: 1px solid #00a0e9;
}
/* 复选框中的勾选 */
.tree /deep/ .el-checkbox__inner::after {
  height: 14px;
  width: 6px;
  left: 8px;
  border: 2px solid white;
  border-left: none;
  border-top: none;
}
/* 右上角关闭按钮 */
.close {
  /* float: right; */
  position: absolute;
  font-size: 50px;
  font-weight: 900;
  right: 50px;
  top: 40px;
  transition: all 1s;
  z-index: 5001;
  cursor: pointer;
}
</style>
